<template>
  <div class="com-container">
    <div class="com-chart" ref="seller_ref"></div>
    <span :style="comStyle" class="iconfont arr_left" @click="toLeft"
      >&#xe6ef;</span
    >
    <span :style="comStyle" class="iconfont arr_right" @click="toRight"
      >&#xe6ed;</span
    >
    <span :style="comStyle" class="cat_name">{{ catTitle }}</span>
  </div>
</template>

<script setup>
import * as echarts from 'echarts'
import { computed, markRaw, onBeforeUnmount, onMounted, ref, watch } from 'vue'
import axios from 'axios'
//主题
import data from '../../../static/theme/chalk.json'
import data1 from '../../../static/theme/vintage.json'
import { getThemeValue } from '../../utils/theme_utils'
import { useStore } from 'vuex'
const store = useStore()
// const theme = computed(() => store.state.visual.theme)
const seller_ref = ref(null) //ref
const chartInstance = ref(null) //实例化
const allData = ref(null) //总数据
//页码
let currentIndex = 0
let titleFontSize = ref(0) //标题字体

// 初始化chartInstance对象
const initChart = () => {
  //初始化主题
  echarts.registerTheme('chalk', data)
  echarts.registerTheme('vintage', data1)
  //解决报错 用 markRaw淘一下转成不是响应式的
  chartInstance.value = markRaw(
    echarts.init(seller_ref.value, store.state.visual.theme)
  )
  const initOption = {
    title: {
      text: '▎ 热销商品销售金额占比统计',
      left: 20,
      top: 20
    },
    legend: {
      top: '15%',

      icon: 'circle'
    },
    tooltip: {
      trigger: 'item',
      formatter: function (params) {
        let tipArray = []
        params.data.children.forEach(function (item) {
          let childStr = `
          ${item.name}&nbsp;&nbsp;&nbsp;
          ${parseInt((item.value / params.value) * 100) + '%'}
          `
          tipArray.push(childStr)
        })
        return tipArray.join('<br/>')
      }
    },
    series: [
      {
        type: 'pie',
        label: {
          // 隐藏文字
          show: false
        },
        labelLine: {
          // 隐藏线
          show: false
        },
        emphasis: {
          label: {
            // 高亮显示文字
            show: true
          }
        }
      }
    ]
  }
  chartInstance.value.setOption(initOption)
}
//获取数据
const getData = () => {
  axios.get('../../../static/data/hotproduct.json').then((res) => {
    allData.value = res.data
    updateChart()
  })
}
//更新图表
const updateChart = () => {
  // 处理图表需要的数据
  // 饼图数据
  const seriesData = allData.value[currentIndex].children.map((item) => {
    return {
      value: item.value,
      name: item.name,
      children: item.children
    }
  })
  // 图例数据
  const legendData = allData.value[currentIndex].children.map((item) => {
    return item.name
  })
  const dataOption = {
    legend: {
      data: legendData
    },
    series: [
      {
        data: seriesData
      }
    ]
  }
  chartInstance.value.setOption(dataOption)
}
// 当浏览器的大小发生变化的时候, 会调用的方法, 来完成屏幕的适配
const screenAdapter = () => {
  titleFontSize.value = (seller_ref.value.offsetWidth / 100) * 3.6
  //分辨率大小相关的配置项
  const adapterOption = {
    title: {
      textStyle: {
        fontSize: titleFontSize.value
      }
    },
    legend: {
      itemWidth: titleFontSize.value,
      itemHeight: titleFontSize.value,
      itemGap: titleFontSize.value,
      textStyle: {
        fontSize: titleFontSize.value / 2
      }
    },
    series: [
      {
        radius: titleFontSize.value * 4.8,
        center: ['50%', '60%']
      }
    ]
  }
  chartInstance.value.setOption(adapterOption)
  chartInstance.value.resize()
}
//左边点击
const toLeft = () => {
  currentIndex--
  if (currentIndex < 0) {
    currentIndex = allData.value.length - 1
  }
  updateChart()
}
//右边点击
const toRight = () => {
  currentIndex++
  if (currentIndex > allData.value.length - 1) {
    currentIndex = 0
  }
  updateChart()
}
//计算属性
const catTitle = computed(() => {
  if (!allData.value) {
    return ''
  }
  return allData.value[currentIndex].name
})
const comStyle = computed(() => {
  return {
    fontSize: titleFontSize.value + 'px',
    color: getThemeValue(store.state.visual.theme).titleColor
  }
})
onMounted(() => {
  //初始化配置
  initChart()
  //初始化数配置
  getData()
  window.onresize = screenAdapter
  //   初始化分辨率配置
  screenAdapter()
})
onBeforeUnmount(() => {
  window.onresize = null
})
defineExpose({
  screenAdapter
})
watch(
  () => store.state.visual.theme,
  () => {
    chartInstance.value.dispose()
    initChart() // 重新以最新的主题名称初始化图表对象
    screenAdapter() // 完成屏幕的适配
    updateChart() // 更新图表的展示
  }
)
</script>

<style lang="scss" scoped>
.com-container {
  position: relative;
}
.arr_left {
  position: absolute;
  left: 10%;
  top: 60%;
  transform: translateY(-50%);
  cursor: pointer;
  color: #fff;
}
.arr_right {
  position: absolute;
  right: 10%;
  top: 60%;
  transform: translateY(-50%);
  cursor: pointer;
  color: #fff;
}
.cat_name {
  position: absolute;
  left: 80%;
  bottom: 10px;
  font-weight: bold;
  color: #fff;
}
</style>
